<template>
  <el-pagination
    :page-size="size"
    :page-sizes="pages"
    :current-page="current"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="Number(props.list_total)"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const size = ref(50) // 每页显示数量
  const current = ref(1) // 当前页码
  const pages = ref([50, 100, 150, 200, 300])

  //子组件接收父组件传递过来的值
  const props = defineProps({
    list_total: Number,
  })

  // 数量
  const handleSizeChange = (val: number) => {
    size.value = val
  }

  // 页码
  const handleCurrentChange = (val: number) => {
    current.value = val
  }
  // 初始化
  const setPage = () => {
    current.value = 1
    // size.value = 50
  }
  // 向父组件传值
  defineExpose({ size, current, maxPage: pages.value[pages.value.length - 1], setPage })
</script>
